<script lang='ts' setup>
import { ref } from 'vue'

import {
    Avatar,
    Memo,
    Reading,
    User,
} from '@element-plus/icons-vue'
import { useStore } from '@/stores/store'
import router from '@/router'
const activeIndex = ref('1')
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const isCollapse = ref(false)
const logout = () =>{

sessionStorage.removeItem('share-data');
router.push('/login')

}

</script>
<template>
    <div id="首页">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false">
            <el-menu-item index="0">
                <div id="标题">
                    小谦图书借阅管理
                </div>
            </el-menu-item>
            <el-menu-item index="1">个人中心</el-menu-item>
            <el-sub-menu index="2">
                <template #title>账号</template>
                <el-menu-item index="2-1" @click="logout">退出登录</el-menu-item>
                <el-menu-item index="2-2" @click="$router.push('/changePass')">修改密码</el-menu-item>
                <el-menu-item index="2-3" @click="$router.push('/register')">注册</el-menu-item>
            </el-sub-menu>
        </el-menu>
        <div style="display: flex;flex-grow: 1;position: relative;">
            <el-button size="small" type="primary" id="折叠按钮" @click="isCollapse = !isCollapse">{{ !isCollapse ? '折叠' :
                '展开'
                }}</el-button>
            <el-menu default-active="1-1" :collapse="isCollapse" class="el-menu-vertical-demo" @open="handleOpen"
                @close="handleClose">
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <Reading />
                        </el-icon>
                        <span>书籍信息</span>
                    </template>
                    <el-menu-item index="1-1">文学</el-menu-item>
                    <el-menu-item index="1-2">科技</el-menu-item>
                    <el-menu-item index="1-3">社会科学</el-menu-item>
                    <el-menu-item index="1-4">艺术</el-menu-item>
                    <el-menu-item index="1-5">教育</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <Memo />
                        </el-icon>
                        <span>借阅信息</span>
                    </template>
                    <el-menu-item index="2-1">借阅统计</el-menu-item>
                    <el-menu-item index="2-2">借阅订单</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>读者信息</span>
                    </template>
                    <el-menu-item index="3-1">借阅人信息</el-menu-item>
                    <el-menu-item index="3-2">借阅人订单</el-menu-item>
                </el-sub-menu>
                <el-menu-item index="4">
                    <el-icon>
                        <Avatar />
                    </el-icon>
                    <span>系统用户信息</span>
                </el-menu-item>
            </el-menu>
            <div>
                内容区域
            </div>
        </div>
    </div>
</template>
<style scoped>
#首页 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#折叠按钮 {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1;

}

.el-menu-vertical-demo {
    padding-top: 30px;
}

.el-menu--horizontal>.el-menu-item:nth-child(1) {
    margin-right: auto;
}

#标题 {
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
}
</style>